<template>
    <div class="file seatchItem" @click="change">
        <div class="file-box">
            <span class="file-type" :class="apiValue.type">{{apiValue.type.toUpperCase()}}</span>
            <span class="file-title">{{apiValue.title}}</span>
            <div class="url">{{apiValue.url}}</div>
        </div>
    </div>
</template>
<script>
    export default {
        props: ['apiValue', 'changeEvent'],
        methods: {
            change() {
                this.changeEvent(this.apiValue);
            },
        },
    }
</script>
<style>
    .file.seatchItem {
        height: 60px;

    }

    .file .url {
        margin: -7px 0 0 0;
        color: #909399;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
        padding: 0 0 5px 10px;
    }

    .file.seatchItem.active .file-box {
        padding: 0 0 0 10px;
        background: #ecf6ff;
        margin: 0 15px 0 0;
    }
</style>